<template>
	<view class="page" :style="{ '--color': color }" v-if="myInfo">
		<status-bar title="团队管理"></status-bar>
		<view class="Info">
			<view class="userBox">
				<image :src="$imgUrls(myInfo.headimg)" mode="aspectFill" class="userImg"></image>
				<view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
			</view>
			<view class="flex-1 white">
				<view class="size30">{{ myInfo.name }}</view>
				<view class="size30 m-top10">{{ myInfo.tel }}</view>
			</view>
		</view>

		<view class="LvBox">
			<text class="size30 color_33">团队等级</text>
			<view class="LvWrapper">
				<text class="size28">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
				<view class="content">
					<text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
					<view class="line">
						<u-line-progress :percentage="myInfo.upLevelInfo.proportion" height="9" activeColor="#ffcc00"></u-line-progress>
					</view>
				</view>
				<text class="size32 color_33">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
			</view>
		</view>

		<view class="Income">
			<view @click="toUrl('/moneyPage/capital/brokerage_list')">
				<view class="color_33 size28">我的收益（元）</view>
				<view class="color_33 size50 m-top20">{{ myInfo.income }}</view>
			</view>
			<view class="d-flex a-center" @click="toUrl('/moneyPage/capital/withdraws')">
				<text class="color size26">去提现</text>
				<view class="iconfont icon-a-zujian32 h7 color p-left4"></view>
			</view>
		</view>

		<view class="BoxItem">
			<!-- @click="toUrl('/Releases/groupPer')" -->
			<view class="list" @click="toUrl('/Releases/promotionOrder')">
				<view class="title">团队业绩（元）</view>
				<view class="Num">{{ myInfo.teamInfo.teamOrderMoney }}</view>
			</view>
			<view class="list" @click="toUrl('/Releases/groupMem')">
				<view class="title">团队成员（位）</view>
				<view class="Num">{{ myInfo.teamInfo.teamUserNum }}</view>
			</view>
		</view>

		<view class="BoxItem m-top20" v-if="myInfo.inviteInfo && myInfo.inviteInfo.orderId > 0">
			<view class="list" @click="toUrl(`formList?orderId=${myInfo.inviteInfo.orderId}`)">
				<view class="title">{{ myInfo.inviteInfo.title }}</view>
				<view class="black size28">待审核 {{ myInfo.inviteInfo.waitNum }}</view>
			</view>
			<image :src="$imgUrls(myInfo.inviteInfo.orderImg)" mode="widthFix" class="orderImg" @click="toUrl(myInfo.inviteInfo.orderPath)"></image>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Api from '@/common/Api.js';
export default {
	data() {
		return {
			myInfo: ''
		};
	},
	computed: {
		...mapState(['color'])
	},
	onLoad() {
		this.getConfig();
	},
	methods: {
		async getConfig() {
			const result = await Api.getConfig();
			this.myInfo = result;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2;
}

.Info {
	background-color: var(--color);
	padding: 40rpx 24rpx;
	display: flex;
	align-items: center;

	.userBox {
		width: 150rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		position: relative;

		.userImg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.Lvs {
			max-width: 100%;
			background-color: #ff9900;
			color: #fff;
			font-size: 22rpx;
			padding: 2rpx 10rpx;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}
}

.LvBox {
	width: 690rpx;
	padding: 20rpx;
	background-color: #fff;
	margin: 24rpx auto 0;
	border-radius: 10rpx;

	.LvWrapper {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.content {
			flex: 1;
			margin: 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.Txt {
				color: #b7655a;
				font-size: 26rpx;
			}

			.line {
				width: 100%;
				margin-top: 10rpx;
			}
		}
	}
}

.Income {
	width: 690rpx;
	background-color: #fff;
	padding: 30rpx 24rpx;
	border-radius: 10rpx;
	margin: 24rpx auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.BoxItem {
	width: 690rpx;
	margin: auto;
	display: flex;
	flex-direction: column;

	.list {
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			color: #333;
			font-size: 28rpx;
		}

		.Num {
			color: #333;
			font-size: 50rpx;
		}

		.count {
			display: inline-block;
			width: 50%;
			margin-top: 10rpx;
			font-size: 28rpx;
		}

		.toTitle {
			text-align: center;
			line-height: 200rpx;
			font-size: 36rpx;
		}
	}

	.orderImg {
		width: 100%;
		border-radius: 0 0 10rpx 10rpx;
	}
}
</style>
